import { defineComponent, PropType } from 'vue';
import "./index.scss";
import LoadingGif from "@/assets/images/loading.gif";

export default defineComponent({
    props: {
        show: {
            type: Boolean as PropType<boolean>,
            default: false
        },
        context: {
            type: String as PropType<string>,
            default: ""
        }
    },
    setup(props) {
        const VITE_MOCK_SWIPE = import.meta.env.VITE_MOCK_SWIPE as string;

        return () => (
            <div class="component-loading">
                {props.show && (
                    <div class={`loading`}>
                        <div class="n-message-wrapper"
                            style={{
                                alignItems: 'flex-start',
                                '--n-bezier': 'cubic-bezier(0.4, 0, 0.2, 1)',
                                '--n-margin': '0 0 8px 0',
                                '--n-padding': '10px 20px',
                                '--n-max-width': '720px',
                                '--n-font-size': '14px',
                                '--n-icon-margin': '0 10px 0 0',
                                '--n-icon-size': '20px',
                                '--n-close-size': '16px',
                                '--n-close-margin': '0 0 0 12px',
                                '--n-text-color': 'rgb(51, 54, 57)',
                                '--n-color': '#fff',
                                '--n-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
                                '--n-icon-color-info': '#2080f0',
                                '--n-icon-color-success': '#18a058',
                                '--n-icon-color-warning': '#f0a020',
                                '--n-icon-color-error': '#d03050',
                                '--n-icon-color-loading': '#18a058',
                                '--n-close-color': 'rgba(122, 122, 122, 1)',
                                '--n-close-color-pressed': 'rgba(149, 149, 149, 1)',
                                '--n-close-color-hover': 'rgba(89, 89, 89, 1)',
                                '--n-line-height': '1.6',
                                '--n-border-radius': '3px'
                            }}>
                            <div class="n-message n-message--info-type">
                                <div class="n-message__content">
                                    <img style={{ width:"75px",height:"76px",marginRight:'20px' }} src={LoadingGif}></img>
                                    <span>{props.context}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </div>
        );
    }
});
